<template>
    <view class="page" :class="{ minH: tabTitle }" :style="{ '--color': color }">
        <status-bar v-if="tabTitle && showTabBar" :title="tabTitle" back="0" search="1"></status-bar>
        <status-bar v-else :title="nameDefinition.storeDefinitionName + '列表'"></status-bar>
        <backTop v-if="toTop"></backTop>
        <template v-if="onceLevel && onceLevel.length > 0">
            <block v-if="onceLevel.length > 1">
                <view class="leftBar" :style="{ top: navHeight + System.statusBarHeight + 'px' }">
                    <view class="ltItem flex-box align-center" @click="tabs(item.bussId, item.bussName)" :class="{ active: item.bussId == currBussId }" v-for="(item, index) in onceLevel" :key="index">
                        <text class="thmeBg leftLine" v-if="item.bussId == currBussId"></text>
                        <text class="flex lines2 txt">{{ item.bussName }}</text>
                    </view>
                </view>
            </block>
            <view class="rightContent flex" :class="{ 'm-left150': onceLevel.length > 1 }">
                <view class="right-tab flex-box align-center" :style="{ top: navHeight + System.statusBarHeight + 'px', left: onceLevel.length > 1 ? '150rpx' : '0' }">
                    <view :class="{ active: tab == 1 }" @click="tabCheck(1, 'favorable')">好评</view>
                    <view :class="{ active: tab == 2 }" @click="tabCheck(2, 'sales')">销量</view>
                    <view :class="{ active: tab == 3 }" @click="tabCheck(3, 'distance')">附近</view>
                    <text :style="{ left: 16.67 * (2 * tab - 1) + '%' }"></text>
                </view>
                <template v-if="storeList.length > 0">
                    <view @click="toStore(item.shop_id)" class="storeItem flex-box align-center" v-for="(item, index) in storeList" :key="index">
                        <image class="storeLogo" :src="item.logo ? $imgUrls(item.logo) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
                        <view class="flex">
                            <view class="flex-box align-center m-bot12">
                                <view class="type h7 white thmeBg m-right10 f-shrink-0" v-if="item.bussName">{{ item.bussName }}</view>
                                <view class="lines storeTitle">{{ item.name }}</view>
                            </view>
                            <view class="flex-box align-center m-bot12">
                                <u-rate :value="item.score" :minCount="0" activeColor="#FF632D" inactiveColor="#e6e5e4" inactiveIcon="star-fill" size="14" gutter="1" readonly allowHalf></u-rate>
                                <view class="score size26 bold p-left10" v-if="item.score && item.score != 0">{{ item.score }}</view>
                                <view class="h6 color_99 p-left10" v-else>暂无评分</view>
                            </view>
                            <view class="lines color_99">{{ item.address }}</view>
                        </view>
                    </view>
                    <view class="DiLine" v-if="showDiLine">------ 我也是有底线的 ------</view>
                </template>
                <empty type="1" v-if="noData" cat="4" :msg="'您还没有相关' + nameDefinition.storeDefinitionName + '哦~'"></empty>
            </view>
        </template>
        <empty type="1" v-if="noData && !onceLevel" cat="4" :msg="msg"></empty>
        <tabBar :tab="showTabBar ? 5 : ''" v-if="showTabBar"></tabBar>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    var that;
    export default {
        props: ['title'],
        data() {
            return {
                toTop: false,

                staticUrl: this.staticUrl,
                currBussId: '',
                currBussTxt: '',

                storeList: [],
                onceLevel: '',
                sort_type: 'favorable', //favorable 好评  sales 销量  distance 距离
                page: 1,
                more: false, // 是否加载更多
                noData: false,
                msg: '',
                showDiLine: false,
                showTabBar: false,
                tab: 1
            };
        },
        mounted() {
            that = this;
        },
        onLoad(e) {
            // 跳转路由要传，跳tabBar不用
            if (e.bussId) this.currBussId = e.bussId;
            if (!e.bussId) this.showTabBar = true;
            that = this;
            that.topCategory();
        },

        methods: {
            tabCheck(i, sort_type) {
                that.tab = i;
                that.sort_type = sort_type;
                that.page = 1;
                that.storeList = [];
                that.goodsType();
            },
            tabs(id, txt) {
                if (that.currBussId != id) {
                    that.storeList = [];
                    that.currBussId = id;
                    that.page = 1;
                    that.currBussTxt = txt;
                    // uni.showLoading({
                    // 	title:'加载中'
                    // })
                    that.goodsType();
                }
            },
            toStore(id) {
                uni.navigateTo({
                    url: '/pages/store/storeIndex?shop_id=' + id
                });
            },
            topCategory: function () {
                that.$http
                    .post({
                        url: '/singleSaleApi/shopCateList',
                        data: {
                            bussId: this.currBussId
                        }
                    })
                    .then((res) => {
                        if (res.errcode == 100 && res.data) {
                            that.onceLevel = res.data;
                            if (!that.currBussId) {
                                that.currBussId = that.onceLevel[0].bussId;
                                that.currBussTxt = that.onceLevel[0].bussName;
                            }
                            that.goodsType();
                        } else {
                            that.noData = true;
                            that.msg = res.msg;
                        }
                    });
            },
            goodsType: function () {
                that.more = false;
                that.showDiLine = false;
                that.noData = false;
                that.$http
                    .post({
                        url: '/singleSaleApi/shopList',
                        data: {
                            bussId: that.currBussId,
                            page: that.page,
                            pageNum: 10,
                            sort_type: that.sort_type
                        }
                    })
                    .then((res) => {
                        if (res.errcode == 100 && res.data) {
                            that.storeList = that.storeList.concat(res.data);
                            if (res.data.length > 9) {
                                that.page++;
                                that.more = true;
                            }
                        }
                        if (that.storeList.length > 0 && (!res.data || res.data.length < 10)) {
                            that.showDiLine = true;
                        }
                        if (that.storeList.length < 1) {
                            that.noData = true;
                        }
                        // uni.hideLoading()
                    });
            }
        },
        computed: {
            ...mapState(['nameDefinition', 'tabTitle', 'vid', 'share', 'navHeight', 'System', 'color'])
        },
        onReachBottom() {
            if (that.more) {
                that.goodsType();
            }
        },
        onShareAppMessage(res) {
            let share = this.share;
            return {
                title: share.title,
                desc: share.desc,
                path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
                imageUrl: `${share.imageUrl}`
            };
        },
        onPageScroll(e) {
            if (e.scrollTop > 300) {
                that.toTop = true;
            } else {
                that.toTop = false;
            }
        }
    };
</script>

<style scoped lang="scss">
    .page {
        &.minH {
            min-height: calc(100vh - 100rpx - constant(safe-area-inset-bottom));
            min-height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
        }
    }
    .leftBar {
        width: 150rpx;
        background: #f5f5f5;
        position: fixed;
        left: 0;
        top: 0;
        overflow-y: auto;
        bottom: 0;
        z-index: 22;
    }
    .rightContent {
        padding: 88rpx 20rpx 10rpx;

        .right-tab {
            position: fixed;
            height: 100rpx;
            // left: 150rpx;
            right: 0;
            background-color: #ffffff;
            z-index: 2;
            justify-content: space-around;
            box-shadow: 0 0 12rpx 1px #f5f5f5;
            view {
                &.active {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: var(--color);
                }
            }
            text {
                width: 40rpx;
                height: 6rpx;
                border-radius: 6rpx;
                position: absolute;
                bottom: 0;
                background-color: var(--color);
                left: 16.67%;
                margin-left: -20rpx;
                transition: left 0.2s;
            }
        }
    }
    .leftLine {
        width: 8rpx;
        height: 30rpx;
    }
    .ltItem {
        height: 100rpx;
    }
    .ltItem.active {
        background-color: #ffffff;
        .txt {
            font-weight: bold;
        }
    }
    .ltItem .txt {
        text-align: center;
        padding: 0 10rpx 0 6rpx;
    }
    .storeItem {
        padding: 30rpx 0 30rpx 20rpx;
        background-color: #ffffff;
        border-bottom: 2rpx solid #f5f5f5;
    }
    .storeTitle {
        font-size: 26rpx;
        color: #222222;
    }
    .storeLogo {
        border-radius: 50%;
        width: 140rpx;
        height: 140rpx;
        margin-right: 30rpx;
    }
    .type {
        width: fit-content;
        line-height: 32rpx;
        padding: 0 10rpx;
        border-radius: 6rpx;
    }
    .score {
        color: #dc1a20;
        line-height: 30rpx;
    }
</style>
